
<template>
  <div class="detail">
    <MyHead :title="$route.query.title"></MyHead>
    <div class="list" v-if="item">
      <div class="item">
        <div class="link">
          <div class="item-box">
            <div class="line">
              <div class="name center">
                <van-icon name="user-o" /> {{ item.author.username }}
              </div>
              <div class="date center">
                <van-icon name="clock-o"></van-icon>:{{
                  item.date | timeFormat(true)
                }}
              </div>
            </div>
            <div class="title mt5 row">
              <van-icon name="fire" color="red" class="icon"></van-icon>
              <span>{{ item.hot }}</span>
            </div>
            <div class="title mt5 row">
              <van-icon name="label-o" class="icon"></van-icon>
              <span>{{ item.title }}</span>
            </div>
            <div class="campany mt5 row">
              <van-icon name="cashier-o" class="icon"></van-icon>
              <span>{{ item.campany }}</span>
            </div>
            <div class="address mt5 row">
              <van-icon name="location-o" class="icon"></van-icon>
              <span>{{ item.address }}</span>
            </div>
            <div class="level mt5 row">
              <van-icon name="chart-trending-o " class="icon"></van-icon>
              <van-tag
                size="large"
                :color="colors[loda.findIndex(levels, (v) => v == item.level)]"
              >
                {{ item.level }}
              </van-tag>
            </div>
            <div class="tags mt5 row">
              <p>面试标签:</p>
              <div class="mt5">
                <van-tag
                  class="tag"
                  size="large"
                  round
                  :color="colors[index]"
                  v-for="(val, index) in item.tags"
                >
                  {{ val.value }}
                </van-tag>
              </div>
            </div>
            <div class="imgs mt5 row">
              <p>面试图片:</p>
              <div class="mt5" v-if="item.imgs.length == 1">
                <img
                  class="bigimg"
                  @click="previewImg(0)"
                  :src="item.imgs[0].url.replace(/public/, baseURL)"
                  alt=""
                />
              </div>
              <div class="mt5 sbox" v-else>
                <img
                  class="simg"
                  @click="previewImg(i)"
                  :src="v.url.replace(/public/, baseURL)"
                  v-for="(v, i) in item.imgs"
                  :key="i"
                  alt=""
                />
              </div>
            </div>
            <div class="tags mt5 row" v-if="item.audioSrc">
              <p>面试录音:</p>
              <div class="mt5 audio">
                <audio
                  controls
                  :src="item.audioSrc.replace(/public/, baseURL)"
                ></audio>
              </div>
            </div>
            <div class="ques mt5 row">
              <p>面试题目:</p>
              <div class="mt5">
                <van-cell-group>
                  <van-cell
                    :to="
                      '/ques/detail/' +
                      id +
                      '_' +
                      v.label +
                      '?ques=' +
                      v.value +
                      '&phone=' +
                      item.author.phone +
                      '&hot=' +
                      item.hot
                    "
                    is-link
                    :title="'第' + (index + 1) + '题'"
                    v-for="(v, index) in item.quesList"
                    :key="index"
                    icon="label-o"
                    :value="v.value"
                  />
                </van-cell-group>
              </div>
            </div>
            <div class="ques mt5 row">
              <p>面试总结:</p>
              <div class="mt5">
                <div class="content">{{ item.content }}</div>
              </div>
            </div>
            <div class="actions mt10 row">
              <div class="cit" @click="throttle(todoLikeAction(), 1000)">
                <van-icon
                  name="like"
                  :color="hasLike ? '#EE6666' : '#333'"
                /><span :style="{ color: hasLike ? '#EE6666' : '#333' }">
                  {{ likeCount }}</span
                >
              </div>
              <div class="cit" @click="throttle(todoCollectAction(), 600)">
                <van-icon
                  name="star"
                  :color="hasCollect ? '#EE6666' : '#333'"
                /><span :style="{ color: hasCollect ? '#EE6666' : '#333' }">{{
                  collectCount
                }}</span>
              </div>
              <div class="cit" @click.stop="show = true">
                <van-icon name="comment" /> <span>{{ item.pings }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="alist mt20">
        <div v-if="pingList.length > 0">
          <van-divider
            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0' }"
          >
            所有评论({{ pingList.length }})
          </van-divider>
          <div class="anlist">
            <div class="aitem" v-for="(v, index) in pingList" :key="index">
              <div class="left">
                <Avatar :src="v.userInfo.avatar"></Avatar>
              </div>
              <div class="right">
                <h3 class="name">
                  {{ v.userInfo.username }}
                  <span
                    v-if="item.author.phone == v.userInfo.phone"
                    style="color: #ee6666"
                    >(面试者)</span
                  >
                </h3>
                <div class="answer mt5">
                  {{ v.comment }}
                </div>
                <div class="time mt10">
                  <span> {{ v.time | timeFormat(true) }}</span>
                  <van-rate
                    size="12px"
                    v-model="v.rate"
                    icon="like"
                    void-icon="like-o"
                    readonly
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="没有评论哦~"
          />
        </div>
      </div>
    </div>
    <van-overlay :show="show">
      <div class="mask" v-if="show">
        <div class="mask-box">
          <van-field
            v-model="form.comment"
            rows="6"
            autosize
            type="textarea"
            maxlength="400"
            placeholder="请输入你的评论"
            show-word-limit
            class="textarea"
          />
          <div class="mt10 rtext">
            评分:
            <van-rate v-model="form.rate" icon="like" void-icon="like-o" />
          </div>
          <div class="mt10">
            <van-button
              :disabled="!form.comment"
              @click="addComments"
              block
              type="primary"
              >提交评论</van-button
            >
          </div>
          <div class="mt10">
            <van-button block type="default" @click="show = false"
              >关闭评论</van-button
            >
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {
  todogetmsbyid,
  todochangemshot,
  todogetmslikes,
  todoaddlikeone,
  tododellikeone,
  todochangemsinfo,
  todogetcollectlist,
  todoaddcollectone,
  tododelcollectone,
  todogetpinglist,
  todoaddpingsone,
} from "@/api/api";
import { ImagePreview } from "vant";

export default {
  data() {
    return {
      item: null,
      id: "", // 面试的ID
      hasLike: false, // 是否点赞
      likeId: "", // 点赞id
      likeCount: 0, // 点赞个数

      hasCollect: false, // 收藏
      collectId: "", // 收藏的id
      collectCount: 0, // 收藏的个数

      pingList: [],
      show: false,
      form: {
        rate: 5,
      },
    };
  },
  methods: {
    // 提交评论
    async addComments() {
      let res = await todoaddpingsone({
        mid: this.id,
        phone: this.userInfo.phone,
        userInfo: this.userInfo,
        msobj: this.item,
        ...this.form,
        time: new Date(),
      });
      if (res.code == 200) {
        this.ShowSuccess("评论成功");
        this.show = false;
        this.form.comment = "";
        this.form.rate = 5;

        setTimeout(() => {
          this.getPingList();
          this.changemsHot(this.item.hot + 4);
          this.changeMsData({ pings: this.item.pings + 1 });
        }, 500);
      }
    },
    async getPingList() {
      let res = await todogetpinglist({
        mid: this.id,
      });
      if (res.code == 200) {
        this.pingList = res.result;
      }
    },
    async todoCollectAction() {
      if (this.hasCollect) {
        let data = await todogetcollectlist({
          mid: this.id,
          phone: this.userInfo.phone,
        });
        let res = await tododelcollectone({
          _id: data.result[0]._id,
          mid: this.id,
        });
        if (res.code == 200) {
          this.hasCollect = false;
          this.ShowSuccess("取消收藏了");
          this.collectCount -= 1;
          setTimeout(() => {
            this.changeMsData({ collects: this.item.collects - 1 });
          }, 500);
        }
      } else {
        let res = await todoaddcollectone({
          mid: this.id,
          msobj: this.item,
        });
        if (res.code == 200) {
          this.hasCollect = true;
          this.ShowSuccess("收藏成功");
          this.collectCount += 1;
          setTimeout(() => {
            this.changemsHot(this.item.hot + 3);
            this.changeMsData({ collects: this.item.collects + 1 });
          }, 500);
        }
      }
    },
    async getHasCollect() {
      let res = await todogetcollectlist({
        mid: this.id,
        phone: this.userInfo.phone,
      });
      if (res.code == 200) {
        if (res.result.length > 0) {
          this.hasCollect = true;
        } else {
          this.hasCollect = false;
        }
      }
    },
    async getCollectCount() {
      let res = await todogetcollectlist({
        mid: this.id,
      });
      if (res.code == 200) {
        this.collectCount = res.result.length;
      }
    },
    async changeMsData(payload) {
      let res = await todochangemsinfo({
        _id: this.id,
        ...payload,
      });
      if (res.code == 200) {
        this.item = { ...this.item, ...payload };
      }
    },
    async todoLikeAction() {
      if (this.hasLike) {
        let data = await todogetmslikes({
          mid: this.id,
          phone: this.userInfo.phone,
        });
        let res = await tododellikeone({
          _id: data.result[0]._id,
          mid: this.id,
        });
        if (res.code == 200) {
          this.hasLike = false;
          this.ShowSuccess("取消点赞了");
          setTimeout(() => {
            this.likeCount -= 1;
            this.changeMsData({ likes: this.item.likes - 1 });
            this.changemsHot(this.item.hot - 2);
          }, 500);
        }
      } else {
        let res = await todoaddlikeone({
          mid: this.id,
          msobj: this.item,
        });
        if (res.code == 200) {
          this.hasLike = true;
          this.ShowSuccess("点赞成功");
          setTimeout(() => {
            this.likeCount += 1;
            this.changeMsData({ likes: this.item.likes + 1 });
            this.changemsHot(this.item.hot + 2);
          }, 500);
        }
      }
    },
    async checkHasLike() {
      let res = await todogetmslikes({
        mid: this.id,
        phone: this.userInfo.phone,
      });
      if (res.code == 200) {
        if (res.result.length > 0) {
          this.hasLike = true;
          this.likeId = res.result[0]._id;
        } else {
          this.hasLike = false;
        }
      }
    },
    async getLikeCount() {
      let res = await todogetmslikes({
        mid: this.id,
      });
      if (res.code == 200) {
        this.likeCount = res.result.length;
      }
    },
    async changemsHot(hot) {
      let res = await todochangemshot({
        _id: this.id,
        hot,
      });
      if (res.code == 200) {
        this.$set(this.item, "hot", hot);
      }
    },
    previewImg(index) {
      let images = this.item.imgs.map((item) => {
        return item.url.replace(/public/, this.baseURL);
      });
      console.log(images);
      ImagePreview({
        images: images,
        startPosition: index,
      });
    },
    async getmsdatabyid() {
      let res = await todogetmsbyid({
        _id: this.$route.params.id,
      });
      if (res.code == 200 && res.result) {
        this.item = res.result;
        this.changemsHot(res.result.hot + 1);
      }
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getmsdatabyid();

    // 登录状态
    if (this.userInfo) {
      this.checkHasLike();
      this.getLikeCount();

      this.getCollectCount();
      this.getHasCollect();

      this.getPingList();
    }
  },
};
</script>

<style lang="scss" scoped>
.rtext {
  display: flex;
  align-items: center;
  color: #fff;
}
.textarea {
  border: 0.5px solid #ddd;
  border-radius: 10px;
}
.mask {
  display: flex;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &-box {
    width: 100%;
    height: 220px;
    padding: 0 30px;
  }
}
.anlist {
  width: 100%;
  height: 500px;
  overflow: auto;
  .aitem {
    display: flex;
    margin-top: 18px;
    border-bottom: 0.5px solid #ddd;
    padding-bottom: 10px;
    width: 100%;
    .left {
      flex-shrink: 0;
    }
    .right {
      flex: 1;
    }
    .name {
      color: #999;
      font-size: 14px;
    }
    .answer {
      color: #000;
      font-weight: bold;
      font-size: 16px;
    }
    .time {
      color: #999;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
  }
}
.content {
  width: 100%;
  min-height: 100px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}
.title,
.campany,
.address {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.audio {
  background: #fff;
  padding: 8px;
  display: flex;
  justify-content: center;
}
.actions {
  border-top: 0.5px solid #ddd;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 10px;
}
.imgs {
  .sbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .simg {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin: 0px 10px 10px 0;
  }
  .bigimg {
    width: 100%;
    height: 300px;
    border-radius: 10px;
  }
}
.tag {
  margin: 3px 3px 0 0;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.list {
  padding: 0px 15px 15px;
  .item {
    margin-top: 20px;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 10px;
    .link {
      color: #666;
      .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.5px solid #ddd;
        padding-bottom: 5px;
      }
      .name {
        font-weight: 600;
      }
      .row {
        .icon {
          margin-right: 4px;
        }
      }
    }
  }
}
</style>